<style lang="less">
.image-carousel {
    position: relative;
    overflow: hidden;
    .ivu-carousel {
        position: static;
    }
    .ivu-carousel-list {
        overflow: visible;
    }
    .ivu-carousel-arrow {
        height: 72px;
        border-radius: 0;
        font-size: 2em;
    }
    .ivu-carousel-arrow.right {
        right: 0;
    }
    .ivu-carousel-arrow.left {
        left: 0;
    }
}
</style>


<template>
<div class="image-carousel">
    <Carousel v-model="value" dots="none" :style="{width:itemWidth}" @on-change="handleChange">
        <slot></slot>
    </Carousel>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase'
import BackgroundImage from '@common/components/background-image';

@Component({
    components: {
        BackgroundImage
    }
})
export default class ImageCarousel extends AbpBase{
    @Prop({type:String,default:'100%'}) itemWidth:String;
    value:Number = 0;
    handleChange(oldValue, value) {
        // if(oldValue == 0 && value != 1) {
        //     this.value = 0;
        // }else if(oldValue == this.items.length - 1 && value == 0) {
        //     this.value = this.items.length - 1;
        // }
    }
}
</script>

<style>

</style>
